<template>
  <div class="flex w-full h-full justify-content-center align-items-center">
    <form @submit="onSubmit" class="flex flex-column w-9" v-if="!url">
      <div class="p-inputgroup mt-8">
        <Dropdown v-model="selectedBrowser" :options="browsers" optionLabel="name" />
        <InputText placeholder="输入查询内容" class="w-6" v-model="keyword" />
      </div>
    </form>
    <Browser v-else v-model:url="url" :origin="selectedBrowser.url"/>
  </div>
</template>

<script setup lang="ts">
import { InputText, Dropdown } from '@/utils/primevue'
import { ref } from "vue";
import { useField, useForm } from 'vee-validate';
import Browser from './Browser.vue'

const { handleSubmit } = useForm();
const url = ref('')

const { value: selectedBrowser } = useField('selectedBrowser', '', { initialValue: { name: '必应搜索', code: 'biying', url: 'https://cn.bing.com/search?q=' } });
const { value: keyword } = useField('keyword', '', { initialValue: '' });

const browsers = ref([
  { name: '百度一下', code: 'baidu', url: 'https://www.baidu.com/s?wd=' },
  { name: '必应搜索', code: 'biying', url: 'https://cn.bing.com/search?q=' },
  { name: '谷歌搜索', code: 'google', url: 'http://www.google.cn/search?client=aff-sub-group2&ie=gb&oe=UTF-8&hl=zh-CN&channel=gjj.cc&q=' },
]);

const onSubmit = handleSubmit((values) => {
  if (values.keyword.trim()) {
    url.value = values.selectedBrowser.url + encodeURI(values.keyword.trim())
  }
});
</script>

<style scoped>
</style>
